/**
 * Created by huotaol on 2017/4/26.
 */
import React, {Component} from "react";
import PropTypes from "prop-types";
import {Image, Text, TouchableOpacity, View} from "react-native";
import CustomStyle from "../../../../common/style/CustomStyle.js";
export default class SectionTitle extends Component {
    static propTypes = {
        title: PropTypes.string,
        rightText: PropTypes.string,
        showArrow: PropTypes.bool,
        rightClick: PropTypes.func,
    };
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
    }

    render() {
        return (
            <View style={[this.props.style, {
                flexDirection: 'row',
                height: CustomStyle.getActualSizeInVertical(68),
                paddingLeft: CustomStyle.getActualSizeInHorizontal(20),
                justifyContent: 'space-between',
                alignItems: 'center',
                paddingRight: CustomStyle.getActualSizeInHorizontal(20),
            }]}>
                <View style={{
                    alignItems: 'center',
                    flexDirection: 'row',
                    justifyContent: 'center',
                }}>
                    <View style={{
                        height: CustomStyle.getActualSizeInHorizontal(28),
                        width: CustomStyle.getActualSizeInHorizontal(8),
                        backgroundColor: '#ff7200',
                    }}/>
                    <Text style={[CustomStyle.baseText, {
                        color: "#ff7200",
                        marginLeft: CustomStyle.getActualSizeInHorizontal(20),
                        fontSize: CustomStyle.getActualFontSize(30),
                    }]}>{this.props.title}</Text>
                </View>
                {this.renderRight()}
            </View>
        );
    }

    renderRight() {
        if (this.props.rightText || this.props.showArrow) {
            return <TouchableOpacity
                onPress={this.props.rightClick}
                style={{flexDirection: 'row', alignSelf: 'center', alignItems: 'center',}}>
                <Text style={[CustomStyle.baseText, {
                    fontSize: CustomStyle.getActualFontSize(26),
                    color: '#857e6e',
                }]}>{this.props.rightText}</Text>
                {this._renderArrow(this.props.showArrow)}
            </TouchableOpacity>
        }
    }

    _renderArrow(show) {
        if (show) {
            return <Image source={require('../../../../img/car_more.png')} style={{
                width: CustomStyle.getActualSizeInHorizontal(15),
                height: CustomStyle.getActualSizeInVertical(26),
                marginLeft: CustomStyle.getActualSizeInHorizontal(20),
            }}/>
        }
    }
}